<template>
  <div class="home_box" v-loading="loading">
    <el-card class="box-card" v-for="item in noticeDatas">
      <template #header>
        <div>
          <span>
            <el-text type="primary" style="font-size: 18px">
              {{ item.author }}
            </el-text>
            &nbsp;于&nbsp;
            <el-text type="primary">{{ item.publishTime }}</el-text>
            &nbsp;发布
          </span>
        </div>
      </template>
      <div style="display: flex; align-items: center; flex-direction: column">
        <h2
          style="
            font-size: 28px;
            font-weight: bold;
            color: var(--el-color-primary);
          "
        >
          {{ item.title }}
        </h2>
        <div>
          <v-md-preview :text="item.content" style="min-width: 820px" />
        </div>
      </div>
    </el-card>

    <el-pagination
      style="margin-top: 12px"
      v-model:current-page="noticePageParmas.pageNum"
      v-model:page-size="noticePageParmas.pageSize"
      :page-sizes="[10, 20, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { reqGetNoticePage } from '@/api/publish'
import { BasePageQuery, NoticeType } from '@/api/publish/type'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

onMounted(async () => {
  await getNoticeInfoPage()
})

const noticePageParmas: BasePageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
})
const noticeDatas = ref<NoticeType[]>()
const total = ref(0)
const loading = ref(false)

const getNoticeInfoPage = async () => {
  loading.value = true
  try {
    const { data } = await reqGetNoticePage(noticePageParmas)
    noticeDatas.value = data.list
    total.value = data.total
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (val: number) => {
  getNoticeInfoPage()
}
const handleCurrentChange = (val: number) => {
  getNoticeInfoPage()
}
</script>
<style scoped lang="scss">
.home_box {
  padding: 24px;
  .box-card {
    margin-bottom: 12px;
  }
}
</style>
